<template>
  <view class="box">
    <view class="header">
      <view class="h-item active">
        <view class="h-icon">
          <text class="iconfont icon-shenfenzheng"></text>
        </view>
        <text class="h-txt">实名认证</text>
      </view>
      <view class="h-item">
        <view class="h-icon"><text class="iconfont icon-creditcard-fill"></text></view>
        <text class="h-txt">添加银行卡</text>
      </view>
      <view class="h-item">
        <view class="h-icon">
          <text class="icon-qiandai iconfont"></text>
        </view>
        <text class="h-txt">审核下款</text>
      </view>
    </view>
    <view class="desc">请如实完成个人信息认证，获取大额度，提高通过率！</view>
    <view class="title">个人信息认证</view>
    <view class="form-box">
      <u-form :model="form" label-width="180" ref="uForm">
        <u-form-item label="姓名：">
          <u-input placeholder="请输入姓名" v-model="form.userName"/>
        </u-form-item>
        <u-form-item label="身份证号：">
          <u-input type="number" placeholder="请输入身份证号" v-model="form.userIdcard"/>
        </u-form-item>
        <u-form-item  label="有无信用卡：">
          <u-input  placeholder="请选择" @click="show = true" v-model="form.userXl" type="select"/>
          <u-action-sheet :safe-area-inset-bottom="true" :cancel-btn="false" :tips="{text:'根据真实情况选择'}" :list="actionSheetList" v-model="show" @click="actionSheetCallback1"></u-action-sheet>
        </u-form-item>
        <u-form-item  label="有无房车：">
          <u-input placeholder="请选择" @click="show2 = true" v-model="form.userJh" type="select"/>
          <u-action-sheet :safe-area-inset-bottom="true" :cancel-btn="false" :tips="{text:'根据真实情况选择'}" :list="actionSheetList2" v-model="show2" @click="actionSheetCallback2"></u-action-sheet>
        </u-form-item>
      </u-form>
    </view>
    <view class="btn-box">
      <u-button @click="handleAttest" ripple shape="circle" type="primary">下一步</u-button>
    </view>
  </view>
</template>

<script>
import {rz} from '@/api'
export default {
  name: "attest1",
  data() {
    return {
      form: {
        userName: '',
        userIdcard:'',
        userJh:'',
        userXl:''
      },
      show: false,
      show2:false,
      actionSheetList:[
        {
          text: '有'
        },
        {
          text: '无'
        },
      ],
      actionSheetList2:[
        {
          text:'房屋'
        },
        {
          text:'汽车'
        },
        {
          text:'房屋和汽车'
        },
        {
          text:'无'
        }
      ]
    }
  },
  methods:{
    actionSheetCallback1(index) {
      console.log(this.actionSheetList[index].text)
      this.form.userXl = this.actionSheetList[index].text;
    },
    actionSheetCallback2(index) {
      this.form.userJh = this.actionSheetList2[index].text;
    },
    handleAttest(){
      uni.showLoading({
        title:'正在提交',
        mask:true
      })
      rz({...this.form,userId:this.$store.getters.getUserInfo.userId * 1}).then(e=>{
        console.log(e)
        setTimeout(()=>{
          uni.hideLoading()
          uni.redirectTo({
            url:'pages/user/attest2'
          })
        },1000)
      })
    }
  }
}

</script>

<style scoped lang="scss">
@import '~@/static/font/iconfont.scss';

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #fff;

  .h-item {
    box-sizing: border-box;
    position: relative;
    width: 200rpx;
    height: 50rpx;
    line-height: 46rpx;
    text-align: center;
    border-radius: 50rpx;
    border: 2rpx solid #999;
    font-size: 24rpx;

    .h-icon {
      position: absolute;
      left: -20rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 56rpx;
      height: 56rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 2rpx solid #999;
      color: #bbb;
      background-color: #fff;
    }

    .h-txt {
      letter-spacing: 1px;
    }

    &.active {
      background-color: #2E82E7;
      color: #fff;
      border-color: #fff;

      .h-icon {
        background-color: #2E82E7;
        border-color: #fff;
        color: #fff;
      }
    }
  }
}

.desc {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #eee;
  color: #999;
}

.title {
  font-size: 30rpx;
  text-align: center;
  line-height: 100rpx;
}

.form-box {
  width: 700rpx;
  border: 1px solid #ddd;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 40rpx 10rpx;
  border-radius: 10rpx;
}
.btn-box{
  margin: 80rpx 60rpx 0;
}
</style>